<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<%@include file="static/common/common.jspf"%>
</head>
<body>

<div id="roleToolbar" style="padding:5px;height:auto">
	<div>
		<input class="easyui-textbox" id="roleNameSelect" style="width:200px;height:30px;padding:12px" 
			data-options="label:'角色名:',labelPosition:'before',labelAlign:'center'">
		<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="selectrole()">搜索</a>
	</div>
	<div style="margin-bottom:5px">
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" id="powerButton" onclick="openMenuWin()">设置权限</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" id="addButton" onclick="openRoleWin(1)">新增角色</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" id="updateButton" onclick="openRoleWin(2)">修改角色</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" id="deleteButton" onclick="batchDeleterole()">删除角色</a> 
	</div>
</div>

<!-- easyUI的表格控件如果设置了分页栏, 每次请求的时候都会默认加上2个参数, 一个为page 指当前第几页,  一个为rows, 指每页的条数 -->
<table id="roleGrid" class="easyui-datagrid" title="用户信息列表" style="width:700px;height:450px"
			data-options="singleSelect:false,
						  collapsible:true,                       
						  url:'role!selectRolePageData',
						  method:'get',
						  fit:true,
						  toolbar:'#roleToolbar',
						  pagination:true,
						  pageSize:3,
						  pageList:[3,4,5,10],
						  striped:true
						  ">
	<thead>
		<tr>
			<th data-options="field:'ck',checkbox:true"></th>
			<th data-options="field:'roleId',width:200,hidden:'hidden'">角色Id</th>
			<th data-options="field:'roleName',width:200">角色名称</th>
			<!-- <th data-options="field:'roleMenu',width:200">描述</th> -->
		</tr>
	</thead>
</table>
<!-- 新增或修改 -->
<div id="roleDialog" class="easyui-dialog" style="width:400px;height:0px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true, title:'角色管理'">   
   <form id="roleForm" method="get">
		<div style="margin-left:20px;margin-bottom:10px">
		<input id="roleId" type="hidden" name="role.roleId">
		<input class="easyui-textbox" id="roleName" name="role.roleName" style="width:80%;height:40px;padding:12px" 
				data-options="label:'角色名称',prompt:'必填',required:true">
			<!-- <input type="hidden" id="roleName" name="role.rolename"> -->
			<!-- <input class="easyui-textbox" id="roleMenu" name="role.rolemenu" style="width:80%;height:40px;padding:12px" 
				data-options="label:'角色描述',prompt:'必填',required:true"> -->
		</div>
		<div>
			<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="padding:5px 0px;width:30%;margin-left:25px" onclick="submitForm()">
				<span style="font-size:14px;">提交</span>
			</a>
		</div>
	</form>
</div>  

<!-- 权限管理 -->
<div id="powerDialog"  class="easyui-dialog" style="width:400px;height:65%;top: 80px"
	data-options="title:'设置权限',iconCls:'icon-edit',resizable:true,modal:true,closed:true">
	<ul id="powerTree"></ul>
	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="padding:5px 0px;width:30%;margin-top: 25px" onclick="submitTree()" >
     	<span style="font-size:14px;">提交</span>
    </a>
</div> 

<script type="text/javascript">
var addUrl;
var updateUrl;
var deleteUrl;
var powerUrl;
$(function(){
	var mIDStr=3;
	$("#addButton").hide();
	$("#updateButton").hide();
	$("#deleteButton").hide();
	$("#powerButton").hide();
	$.ajax({
		url:"user!buttonControl",
		type:"post",
		data:{
			menui:mIDStr
		},
		dataType:"json",
		success:function(data){
			$.each(data,function(index,item){
				if(item.menuName =='新增'){
					addUrl=item.menuRole;
					$("#addButton").show();
				}
				
				if(item.menuName=='编辑'){
					updateUrl=item.menuRole;
					$("#updateButton").show();
				}
				
				if(item.menuName=='删除'){
					deleteUrl=item.menuRole;
					$("#deleteButton").show();
				}
				
				if(item.menuName=='设置权限'){
					powerUrl=item.menuRole;
					$("#powerButton").show();
				}
			});
		}
	})
})




var roleIdStr;
	function openMenuWin(){
		var rows=$("#roleGrid").datagrid('getChecked');
		if(rows.length !=1){
			winAlert("提示","请选择一行数据进行修改！");
		}else{
			$.each(rows,function(index,item){
				roleIdStr=item.roleId;
			})
			
			$.ajax({
				//"role!getmenuId"
				url:powerUrl,
				type:"post",
				data:{
					roleId:roleIdStr
				},
				dataType:"json",
				success:function(result){
					//创建树
					$("#powerTree").tree({
						url:'role!getAllTree',
						method:'get',
						checkbox:true,
						onLoadSuccess:function(){
							$("#powerTree").tree("expandAll");
							$.each(result,function(index,item){
								//需要判断pid不为零（如果主干节点为不确定状态则不能进行勾选）
								var node = $("#powerTree").tree('find',item.menuId);
								if (node.children==null) {
									$("#powerTree").tree('check',node.target);
								}
								/* var node=$("#powerTree").tree('find',item.menuId);
								$("#powerTree").tree('check',node.target); */
							});
						}
					});
					$("#powerDialog").dialog({closed:false});
				}
			});
		}
	}
	
	
	function submitTree(){
		//获取选中或不确定的节点
		var rows=$("#powerTree").tree('getChecked',['checked','indeterminate']);
		var ids;
		$.each(rows,function(index,item){
			if(index==0){
				ids=item.id;
			}else{
				ids=ids+","+item.id;
			}
		});
		 $.post('role!submitTree',{'ids':ids,'roleId':roleIdStr}, function(data){
			 if(data.isok==true){
					$("#powerDialog").dialog({closed:true});
					winAlert("提示","权限修改成功！");
					$("#roleGrid").datagrid("reload");
				}else{
					winAlert("提示","权限修改失败！");
				}
		},'json'); 
	}
	
	
	
	var url;
	
	function openRoleWin(flag){
		$("#roleForm").form('reset');
		//如果flag为1的时候则为新增,直接打开窗口
		//如果flag为2的时候则为修改,将选中的行数据赋给对应表单元素
		if(flag != 1){
			//如果选中复数行,则提示用户请选择一行
			var rows = $('#roleGrid').datagrid('getChecked');
			if(rows.length != 1){
				winAlert("提示", "请选择一行数据进行修改");
			}else{
				//"role!editRole"
				url =updateUrl ;
				var data = rows[0];
				//调用表单的load方法可以直接将json中key与表单中name属性相同的控件 赋值
				//$('#roleForm').form('load', data);
				
				$("#roleId").val(data.roleId);
				$("#roleName").textbox('setValue', data.roleName);
			}
		}else{
			//'role!addRole'
			url = addUrl;
		}
		
		$("#roleDialog").dialog('open');
	}

	function submitForm(){
		$('#roleForm').form('submit', {
			url: url,
			success: function(result){
				var data = JSON.parse(result);
				if(data.isok == true){
					$("#roleGrid").datagrid('reload');
					winAlert("成功!", "操作成功!")
				}else{
					winAlert("错误!", "操作失败!")
				}
				$("#roleDialog").dialog('close');
			}
		});
	}
	
	
	function batchDeleterole(){
		var rows = $('#roleGrid').datagrid('getChecked');
		
		if(rows.length != 0){
			var ids;
			$.each(rows, function(index, item){
				if(index==0){
					ids=item.roleId;
				}else{
					ids=ids+","+item.roleId
				}
			});
			//'role!batchDeleteRole'
			 $.post(deleteUrl,{'ids':ids}, function(data){
					if(data.isok ==true){
						//局部刷新表
						$("#roleGrid").datagrid("reload");
						winAlert("提示","删除成功！");
						}else{
						//局部刷新表
						$("#roleGrid").datagrid("reload");
						winAlert("提示","删除失败！");
						}
				},'json'); 
		}else{
			winAlert("提示", "请至少选择一行数据进行删除!")
		}
	}	
	function winAlert(title, msg){
		$.messager.show({
			title:title,
			msg:msg,
			showType:'fade',
			style:{
				right:'',
				bottom:''
			}
		});

	}
	
	function selectrole(){
		var rolenameVal = $("#roleNameSelect").textbox('getValue');
		var params = {
				roleName:rolenameVal
		}
		$("#roleGrid").datagrid('reload', params);
	}	
</script>
</body>
</html>